<!-- 商品列表 -->
<template>
	<view class="list-box">
		<view class="hot-goods u-m-b-10 u-p-x-16">
			<!-- <view class="u-waterfall">
				<view id="u-left-column" class="u-column">
					<view class="goods-item u-m-b-16 u-flex u-row-center u-col-center" v-for="leftRooms in leftList"
						:key="leftRooms.id">
						<ljshop-live-card :detail="leftRooms" :image="leftRooms.large" :title="leftRooms.name"
							v-if="leftRooms.type!='EXCHANGE'">
						</ljshop-live-card>
					</view>
				</view>
				<view id="u-right-column" class="u-column">
					<view class="goods-item  u-m-b-16 u-flex u-row-center u-col-center" v-for="rightRooms in rightList"
						:key="rightRooms.id">
						<ljshop-live-card :detail="rightRooms" :image="rightRooms.large" :title="rightRooms.name"
							v-if="rightRooms.type!='EXCHANGE'">
						</ljshop-live-card>
					</view>
				</view>
			</view> -->
			<!--<button v-show="total > perPage" class="u-reset-button refresh-btn u-m-y-20 u-flex u-col-center u-row-center"
				@tap.stop="loadMore">
				<text class="u-m-r-6 u-iconfont uicon-reload" style="font-size: 28rpx;color: #999"
					:class="{ 'refresh-active': isRefresh }"></text>
				{{ listParams.page >= lastPage ? '收起' : '加载更多' }}
		 </button> -->
		</view>

		<!-- 缺省页 -->
		<ljshop-empty v-if="isEmpty" :image="$IMG_URL + '/imgs/empty/empty_goods.png'" tipText="暂无该商品，还有更多好货等着你噢~">
		</ljshop-empty>
		<!-- 加载更多 -->
		<u-loadmore v-show="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
	 
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
	let systemInfo = uni.getSystemInfoSync();
	let historyTag = uni.getStorageSync('searchHistoryArr') ? JSON.parse(uni.getStorageSync('searchHistoryArr')) : [];
	export default {
		components: {

		},
		data() {
			return {
				isEmpty: false,
				//goodsList: [],
				goodsList: [],
				searchVal: '',
				categoryId: 0,
				page: 0,
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				lastPage: 0,
				// 瀑布流 350-330
				addTime: 0, //排序间隙时间
				leftHeight: 0,
				rightHeight: 0,
				leftList: [],
				rightList: [],
				//tempList: [],
				tempList: [],
				hasMroe: true,
				order: '',
				rebate: 0

			};
		},
		// 触底加载更多
		onReachBottom() {
			if (this.hasMroe) {
				this.page += 1;
				this.getRoomList();
			}
		},
		onLoad() {

			this.getRoomList();
			this.splitData()

		},
		methods: {
			// 瀑布流相关
			async splitData() {
				if (!this.tempList.length) return;
				let item = this.tempList[0];
				if (!item) return;

				// 分左右
				if (this.leftHeight < this.rightHeight) {
					this.leftHeight += 330;
					this.leftList.push(item);
				} else if (this.leftHeight > this.rightHeight) {
					this.rightHeight += 330;
					this.rightList.push(item);
				} else {
					this.leftHeight += 330;
					this.leftList.push(item);
				}

				// 移除临时列表的第一项，如果临时数组还有数据，继续循环
				this.tempList.splice(0, 1);
				if (this.tempList.length) {
					setTimeout(() => {
						this.splitData();
					}, this.addTime);
				}
			},

			// 商品列表
			getRoomList() {
				let that = this;
				that.loadStatus = 'loading';

				uni.showLoading({})
				that.$http('live.list', {
					page: 0,
				}).then(res => {
					console.info(JSON.stringify(res))
					if (res.length > 0) {
						uni.hideLoading()
						if (res.length < 10) {
							this.hasMroe = false;
						}
						this.hasMroe = true;
						that.goodsList = res;
						that.tempList = res;
						that.goodsList.length && that.splitData();
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	@mixin vue-flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: $direction;
		/* #endif */
	}

	.u-waterfall {
		@include vue-flex;
		flex-direction: row;
		align-items: flex-start;
	}

	.u-column {
		@include vue-flex;
		flex: 1;
		flex-direction: column;
		height: auto;
	}

	.head-box {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 998;
		background: #fff;
	}
</style>
